<html>
	<head>
		<script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="isDebug: true"></script>
		<script type="text/javascript" src="../../../../dojox/off/offline.js"></script>
		
		<style type="text/css">
			@import "../../../../dojo/resources/dojo.css";
			
			/* Bring in the CSS for the default 
			   Dojo Offline UI widget */
			@import "../../../../dojox/off/resources/offline-widget.css";
	    </style>
		
		<script>	
			// configure how we should work offline

			// set our application name
			dojox.off.ui.appName = "Hello World";

			// automatically "slurp" the page and
			// capture the resources we need offline
			dojox.off.files.slurp();
			
			var helloWorld = {
				/* hello world messages to be sent */
				_messages: [],
				
				initialize: function(){
					console.debug("helloWorld.initialize");
					
					// Dojo Offline and Dojo Storage are ready to be used;
					// the page is also finished loading
					
					// listen for syncing events; there are several different
					// syncing event types returned, but we only care about 
					// two: "download" and "finished"
					var self = this;
					dojo.connect(dojox.off.sync, "onSync", this, function(type){
						if(type == "download"){
							// the syncing process is at the download stage --
							// download any data that is necessary to work
							// offline
							
							// call some network service -- in our case
							// we just add some fake data.
							self._messages.push("Hi! This is fake downloaded data!");
					
							// persist this fake data into Dojo Storage
							dojox.storage.put("messages", self._messages);
					
							// now tell Dojo Sync to continue its syncing
							// process; a real network service would be
							// asychronous, so we would have to tell the
							// syncing system to continue at a later point
							// when we got our network results back
							dojox.off.sync.finishedDownloading();
						}else if(type == "finished"){
							// the syncing process is finished
							this._messages = [];
							dojox.storage.remove("messages");
						}
					});
					
					// While offline, as a user works, we create action objects
					// to represent what they have done while offline, adding
					// them to an action log that will automatically be persisted. 
					// When we go back online, Dojo Sync will replay each of 
					// these action, handing them to our onReplay handler
					// for us to handle and act upon now that we have a network
					dojo.connect(dojox.off.sync.actions, "onReplay", this, 
								function(action, actionLog){
									if(action.name == "new hello world message"){
										// this was a hello world message created while offline
						
										// In a real application, we would probably call some network
										// service to replay this action, such as sending an email,
										// creating a task, etc. Instead, we just do an alert box.
										var message = action.data;
										self.sendMessage(message);
						
										// In a real application, the network call would be
										// asynchronous so we don't lock up the UI. For this reason,
										// we have to tell Dojo Sync when to continue replaying the
										// Action Log
										actionLog.continueReplay();
									}
					});
					
					// did the page load with us already offline? if so, 
					// we will have to load our data from persistent storage for 
					// the user to be able to work with since we can't 
					// load it from the network
					if(!dojox.off.isOnline){
						this.loadOfflineData();
					}
					
					// print out what messages we have
					this.printMessages();
				},
				
				loadOfflineData: function(){
					console.debug("We are already offline -- loading Hello World",
									"messages from persistent storage");
					
					dojo.debug("We are already offline -- loading Hello World messages from Dojo Storage");
					
					// get our Hello World messages from Dojo Storage
					this._messages = dojox.storage.get("messages");
					if(!dojo.exists("_messages", this)){
						this._messages = [];
					}
				},
				
				printMessages: function(){
					if(!this._messages.length){
						console.debug("No Hello World messages available");
						return;
					}
					
					console.debug("The following Hello World messages are persistently stored:");
					dojo.forEach(this._messages, console.debug);
				},
				
				send: function(){
					// called when the send button is pressed
					
					// get the text to send
					var inputElem = dojo.byId("helloInput");
					var message = inputElem.value;
					if(!message){
						alert("Please enter a Hello World message to send");
						return;
					}
					
					// if we are online, immediately 'send' this
					// message to a network service
					if(dojox.off.isOnline){
						this.sendMessage(message);
						inputElem.value = "";
						return;
					}else{
						// we are offline
						this.saveOfflineSend(message);
						inputElem.value = "";
					}
				},
				
				sendMessage: function(message){
					// fake 'sending' of Hello World message to a network service -- we
					// just do an alert box
					alert("Sent the following Hello World message to server: "
									+ message);
				},
				
				saveOfflineSend: function(message){	
					// first, add this to our list of messages
					this._messages.push(message);
					
					// now, persist this into Dojo Storage so it is available
					// in the future if we don't reach a network while the
					// browser is open
					dojox.storage.put("messages", this._messages);
					
					// Dojo Sync has us represent offline actions as action
					// objects -- these can have anything we want inside of them.
					// When we create them, they will be added to an offline 
					// Action Log, and when we go back online this log will
					// simply be replayed. Each of the action objects that we
					// added while offline will be handed to our onReplay handler
					// for us to deal with later, so we have to place enough info
					// in here to be useful later on
					var action = {name: "new hello world message", data: message};
					dojox.off.sync.actions.add(action);
					
					alert("This message has been saved for sending when we go back online");
				}
			}
					
			// Wait until Dojo Offline is ready
			// before we initialize ourselves. When this gets called the page
			// is also finished loading.
			dojo.connect(dojox.off.ui, "onLoad", helloWorld, "initialize");
			
			// tell Dojo Offline we are ready for it to initialize itself now
			// that we have finished configuring it for our application
			dojox.off.initialize();
		</script>
		
	</head>
	
	<body style="padding: 2em;">
		<h1>Hello World</h1>
		
		<h2>This is a simple Hello World program using
			Dojo Offline. It doesn't really do much --
			it gives a code sample of how to work with
			Dojo Offline, Dojo Sync, and Dojo SQL.</h2>
			
		<p>In our HTML, we create a DIV with the special id "dot-widget", which
			Dojo Offline will automagically fill with a default
			Dojo Offline widget that tells the user when they are online
			or offline; gives them sync messages; and provides instructions
			on how to download and install the small Dojo Offline client
			runtime. It basically handles all of the UI tedium and hard
			stuff of providing good offline feedback to a user.
			Here is that widget inserted into the page:</p>
			
		<!-- 
			Place the Dojo Offline widget here; it will be automagically
		 	filled into any element with ID "dot-widget".
		 -->
		<div id="dot-widget"></div>	
		
		<p>The default Dojo Offline UI will fill in your application
			name automatically into the UI based on what you set 
			dojox.off.ui.appName to in your JavaScript 
			file; in our case we set it to "Hello World".</p>
			
		<p>It will also fill out the Learn How link with your
			app name; click that link now to see an autogenerated
			page that helps your users make sure they can work
			with your application offline. That page automatically
			figures out if Dojo Offline is installed or not, and
			provides instructions on downloading it if not and
			providing an easy link to running your application
			offline (which is just autoset to be the URL of this
			current page, btw)</p>
			
		<p>Do a View Source on this page to see the JavaScript
			necessary to create an offline web application.</p>
			
		<p>As you play with this example, after installing the
				Google Gears plugin, experiment with 
				dropping the network and going off- and on-line.</p>
			
		<p>To be somewhat of a real example, we need to be able
			to have an action that can be performend either on or
			offline. The following input lets you 'send' Hello
			World messages to a server (it's fake -- we don't 
			really send messages). When we are online, entering
			a message and sending it will cause the action to
			happen immediately (we fake send it to a server); when
			offline, we queue this up to be sent when we next go
			online:</p>
			
		<div id="helloMessage" style="margin: 1em;">
			<label for="helloInput" 
							style="margin-right: 0.2em;">
				Enter Hello World Message:
			</label>
			
			<input name="helloInput" 
							id="helloInput" 
							style="margin-right: 0.2em;">
			
			<button id="sendMessage" 
							onclick="helloWorld.send()"
							style="margin-right: 0.2em;">Send</button>
		</div>
			
		<p>Debug output:</p>
	</body>
</html>
